<template>
  <el-container class="index">
    <el-header>
      <div class="header_left">
        <div class="menu">
          <span class="el-icon-s-fold" @click="isCollapse = !isCollapse"></span>
        </div>
        <img class="logo" src="@/assets/logo1.png" alt />
        <span class="name">黑马面面</span>
      </div>
      <div class="_right" v-if="$store.state.userinfo.username">
        <div class="head">
          <img :src="baseUrl + '/' + $store.state.userinfo.avatar" alt />
        </div>
        <div class="hello">
          <span class="name">{{ $store.state.userinfo.username }}</span
          >,您好
        </div>
        <el-button type="primary" class="btn" @click="leave">退出</el-button>
      </div>
    </el-header>

    <el-container>
      <el-aside width="auto" class="aside">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :router="true"
          :collapse="isCollapse"
        >
          <el-menu-item
            v-for="(item, index) in routerList"
            :key="index"
            v-show="item.meta.role.includes(role)"
            :index="item.path"
          >
            <i :class="item.meta.icon"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
          <!-- <el-menu-item index="/data">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据概览</span>
          </el-menu-item>
          <el-menu-item index="/userlist">
            <i class="el-icon-user"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/worklist">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">跟库列表</span>
          </el-menu-item>
          <el-menu-item index="/companylist">
            <i class="el-icon-office-building"></i>
            <span slot="title">企业列表</span>
          </el-menu-item>
          <el-menu-item index="/subjecklist">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">学科列表</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getToken, removeToken } from "@/utils/token.js";
import router from "@/router/index.js";
import { info } from "@/api/index.js";
import { Message } from "element-ui";
// import store from "@/store/index.js";
export default {
  data() {
    return {
      info: {},
      baseUrl: process.env.VUE_APP_URL,
      isCollapse: true,
      routerList: router.options.routes[2].children, //首页菜单路由信息
      role: this.$store.state.role,
    };
  },
  methods: {
    leave() {
      this.$confirm("你确定要退出吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonTest: "取消",
        type: "warning",
      }).then(() => {
        router.push("/");
        removeToken();
      });
    },
  },
  created() {
    let to = getToken();
    if (to) {
      //获取用户信息
      return info()
        .then((res) => {
          console.log("info", res);
          //判断用户账号是否被封
          if (res.data.data.status == 1) {
            //将用户类别与信息存到全局
            this.$store.state.role = res.data.data.role;
            this.$store.state.userinfo = res.data.data;
            console.log("qingqiu", this.$store.state.role);
            this.$message.success("登录成功");
          } else {
            //检测到账号被封,删除token,跳回登录页
            removeToken();
            Message.error("账号已被禁用");
            router.push("/login");
          }

          // this.info = res.data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    }
    this.$message.error("请登录");
    removeToken();
    router.push("/");
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.index {
  height: 100%;
  width: 100%;
  background: #e8e9ec;
  .aside {
    height: 100%;
    background: #fff;
  }

  .e-menu {
    padding: 19px;
  }
}
.el-header {
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 2px 5px 6px rgba(63, 63, 63, 0.35);

  .header_left {
    float: left;
    display: flex;
    align-items: center;
    .name {
      font-size: 18px;
      color: #49a1ff;
    }
    .menu {
      display: inline-block;
      margin-right: 20px;
      line-height: 60px;
      font-size: 24px;
    }

    img.logo {
      width: 28px;
      display: inline-block;
      margin-right: 10px;
    }
  }
  ._right {
    height: 100%;
    float: right;
    display: flex;
    align-items: center;
    .head {
      height: 43px;
      width: 43px;
      margin-right: 5px;
      img {
        width: 100%;
      }
    }
    .hello {
      font-size: 14px;
      font-weight: 600;
      color: #636363;
    }
    .btn {
      width: 57px;
      height: 28px;
      padding: 0;
      text-align: center;
      line-height: 28px;
      margin-left: 15px;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  // min-height: 400px;
}
</style>
